<?php /*a:3:{s:52:"D:\projects\junhe\app\index\view\product\detail.html";i:1742666307;s:51:"D:\projects\junhe\app\index\view\common\header.html";i:1740139655;s:51:"D:\projects\junhe\app\index\view\common\footer.html";i:1740136709;}*/ ?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">

	<title><?php if(isset($article['title'])): ?><?php echo htmlentities($article['title'],ENT_QUOTES); ?> - <?php endif; if(isset($catInfo['title'])): ?><?php echo htmlentities($catInfo['title'],ENT_QUOTES); ?> -
		<?php endif; ?><?php echo htmlentities($config['name'],ENT_QUOTES); ?></title>
	<meta name="keywords"
		content="<?php if(isset($article['keywords'])): ?><?php echo htmlentities($article['keywords'],ENT_QUOTES); elseif(isset($catInfo['keywords'])): ?><?php echo htmlentities($catInfo['keywords'],ENT_QUOTES); else: ?><?php echo htmlentities($config['keyword'],ENT_QUOTES); ?><?php endif; ?>">
	<meta name="description"
		content="<?php if(isset($article['subtitle'])): ?><?php echo htmlentities($article['subtitle'],ENT_QUOTES); elseif(isset($catInfo['desc_text'])): ?><?php echo htmlentities($catInfo['desc_text'],ENT_QUOTES); else: ?><?php echo htmlentities($config['content'],ENT_QUOTES); ?><?php endif; ?>">
	<link rel="shortcut icon" href="<?php echo htmlentities($config['site_icon'],ENT_QUOTES); ?>" type="image/x-icon">
	<script src="/public/home/js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" href="/public/home/layui/css/layui.css">
	<link rel="stylesheet" href="/public/home/css/common.css">
	<link rel="stylesheet" href="/public/home/css/hover.css">
	<link rel="stylesheet" href="/public/home/css/index.css">
	<script type="text/javascript" src="/public/home/layui/layui.js"></script>
	<link rel="stylesheet" href="/public/home/css/swiper-bundle.css" />
	<script src="/public/home/js/scrollReveal.js" type="text/javascript"></script>

</head>

<body>
	<header class="header w100">
	
			<div class="layui-main d-flex al-c jc-s">
			
					<div class="d-flex al-c">
						<a href="/" class="logo img_100 mr20 d-fs">
							<img class="" src="<?php echo htmlentities($config['pic'],ENT_QUOTES); ?>">
						</a>
					</div>

					<ul class="d-flex  jc-se al-c layui-nav layui-hide-xs ">
						<li
							class="layui-nav-item <?php if((isset($catTreeList['topCate']['id']) && empty($catTreeList['topCate']['id'])) || !isset($catTreeList['topCate']['id'])): ?>layui-this <?php endif; ?>">
							<a href="/"><?php echo htmlentities($function->getCatInfo('1')['title'],ENT_QUOTES); ?></a>
						</li>

						<?php if(is_array($nav) || $nav instanceof \think\Collection || $nav instanceof \think\Paginator): if( count($nav)==0 ) : echo "" ;else: foreach($nav as $key=>$navValue): ?>
							<li
								class="layui-nav-item <?php if((isset($catTreeList['topCate']['id']) && $catTreeList['topCate']['id'] == $navValue['id'])): ?>layui-this <?php endif; ?> ">
								<a href="<?php echo htmlentities($navValue['url'],ENT_QUOTES); ?>" > <?php echo htmlentities($navValue['title'],ENT_QUOTES); ?></a>
							</li>
						<?php endforeach; endif; else: echo "" ;endif; ?>

					</ul>
					<div class="layui-hide layui-show-xs-block  ">
						<i lay-on="nav" class="layui-icon layui-icon-spread-left "></i>
					</div>
				
				<div class="d-flex gap20 al-c">
				    <?php if($is_login): ?>
					<a href="/index/member/" class="img_box d-fs">
				        <img src="/public/home/images/user-account.png">
				    </a>
					<?php else: ?> 
					<a href="/login" class="layui-btn br25 login-btn d-fs">登录/注册</a>
					<?php endif; ?>
                    
                    <form action="/index/article/search/">
                        <input name="keyword" value=" <?php if(isset($keyword)): ?><?php echo htmlentities($keyword,ENT_QUOTES); ?><?php endif; ?>" placeholder="输入关键词搜索">
                        <input name="model" value="产品" type="hidden">
                        <button>
                            <img src="/public/home/images/search.png">
                        </button>
                    </form>
				</div>
				
			</div>
	</header>

	<script>
  layui.use(function(){
    var layer = layui.layer;
 
    	
    		var util = layui.util;
			util.on({
				nav: function () {
					layer.open({
						type: 1,
						offset: 'l',
						anim: 'slideRight', // 从左往右
						area: ['200px', '100%'],
						shade: 0.1,
						title: false,
						shadeClose: true,
						closeBtn: 0,
						id: 'ID-demo-layer-direction-l',
						content: `
                <ul class="gary_c3 d-grid gap30  pt40 pb40">
                
                	<li class="pl20 pr20 <?php if((isset($catTreeList['topCate']['id']) && empty($catTreeList['topCate']['id'])) || !isset($catTreeList['topCate']['id'])): ?>layui-this <?php endif; ?>">
							<a href="/"><?php echo htmlentities($function->getCatInfo('1')['title'],ENT_QUOTES); ?></a>
						</li>
						<?php if(is_array($nav) || $nav instanceof \think\Collection || $nav instanceof \think\Paginator): if( count($nav)==0 ) : echo "" ;else: foreach($nav as $key=>$navValue): ?>
            			<li
            				class="pl20 pr20 <?php if((isset($catTreeList['topCate']['id']) && $catTreeList['topCate']['id'] == $navValue['id'])): ?>layui-this <?php endif; ?> ">
            				<a <?php if(!$navValue['childList']): ?>href="<?php echo htmlentities($navValue['url'],ENT_QUOTES); ?>" <?php endif; ?>> <?php echo htmlentities($navValue['title'],ENT_QUOTES); ?></a>
            			</li>
            		<?php endforeach; endif; else: echo "" ;endif; ?>
            		</ul>
						
                `
					});
				},
			});
    	
  });

	</script>

<!-- 中间区域 -->

<style>

    .spec_active{

        font-weight: bold;

        color: blue;

        background: #777;

        box-shadow: 2px 3px 4px 4px #ccc;

        /* border: none!important; */

    }
        /* 定义动画 */
    @keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
    }

    /* 应用动画 */
    .animated-logo {
    animation: slideIn 0.5s ease-out;
    }

</style>

<div class="top_box">

    <div class="layui-main block1">

        <div class="t2"><?php echo htmlentities($catInfo['keywords'],ENT_QUOTES); ?></div>

        <div class="t1"><?php echo htmlentities($catInfo['title'],ENT_QUOTES); ?></div>

    </div>

    <div class="img1 img_100">

        <img class="" src="<?php echo htmlentities($catInfo['logo'],ENT_QUOTES); ?>">

    </div>

</div>

<div class="product-right-nav">

    <p class="more-btn">查看更多产品<i ></i></p>

    <nav>

        <ul>

            <?php if(count($goods_detail['models'])): if(is_array($goods_detail['models']) || $goods_detail['models'] instanceof \think\Collection || $goods_detail['models'] instanceof \think\Paginator): $i = 0; $__LIST__ = $goods_detail['models'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$models): $mod = ($i % 2 );++$i;?> 

                    <div class="item models_select"  data-id="<?php echo htmlentities($models['id'],ENT_QUOTES); ?>" style="cursor: pointer;" >

                        <div class="img_100">

                            <img src="<?php echo htmlentities($models['thumb'],ENT_QUOTES); ?>">

                        </div>

                        <p><?php echo htmlentities($models['name'],ENT_QUOTES); ?></p>

                    </div>

                <?php endforeach; endif; else: echo "" ;endif; ?>

            <?php endif; ?>

        </ul>

        

    </nav>

</div>

<main class="product">

    <section>

        <div class="layui-main">

            <div class="d-flex gap90 flex-wrap gap20-xs ">

             <div class="product-details-swiper">

                 <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                    <div class="img_100">
                       
                        <img  id="logo" class="animated-logo" src="<?php echo htmlentities($goods_detail['logo'],ENT_QUOTES); ?>" />

                    </div>
                    <div class="swiper-wrapper">
                        
                        <?php if(count($goods_detail['slides'])): if(is_array($goods_detail['slides']) || $goods_detail['slides'] instanceof \think\Collection || $goods_detail['slides'] instanceof \think\Paginator): $i = 0; $__LIST__ = $goods_detail['slides'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$slides): $mod = ($i % 2 );++$i;?> 

                                <div class="swiper-slide">

                                    <div class="img_100">

                                        <img src="<?php echo htmlentities($slides,ENT_QUOTES); ?>" />

                                    </div>

                                </div>

                            <?php endforeach; endif; else: echo "" ;endif; ?>

                        <?php endif; ?>

                        <!-- <?php if(count($goods_detail['models'])): if(is_array($goods_detail['models']) || $goods_detail['models'] instanceof \think\Collection || $goods_detail['models'] instanceof \think\Paginator): $i = 0; $__LIST__ = $goods_detail['models'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$models): $mod = ($i % 2 );++$i;?> 

                                <div class="swiper-slide" id="<?php echo htmlentities($models['id'],ENT_QUOTES); ?>">

                                    <div class="img_100">

                                        <img src="<?php echo htmlentities($models['thumb'],ENT_QUOTES); ?>" />

                                    </div>

                                </div>

                            <?php endforeach; endif; else: echo "" ;endif; ?>

                        <?php endif; ?> -->

                    </div>

                </div>

                <div class="thum-box d-grid  layui-hide-xs">

                    <div class="layui-icon layui-icon-up prev"></div>

                    <div thumbsSlider="" class="swiper mySwiperThum">

                        <div class="swiper-wrapper">
                            
                            <?php if(count($goods_detail['slides'])): if(is_array($goods_detail['slides']) || $goods_detail['slides'] instanceof \think\Collection || $goods_detail['slides'] instanceof \think\Paginator): $i = 0; $__LIST__ = $goods_detail['slides'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$slides): $mod = ($i % 2 );++$i;?> 

                                <div class="swiper-slide">

                                    <div class="img_100">

                                        <img src="<?php echo htmlentities($slides,ENT_QUOTES); ?>" />

                                    </div>

                                </div>

                            <?php endforeach; endif; else: echo "" ;endif; ?>

                        <?php endif; ?>

                            <!-- <?php if(count($goods_detail['models'])): if(is_array($goods_detail['models']) || $goods_detail['models'] instanceof \think\Collection || $goods_detail['models'] instanceof \think\Paginator): $i = 0; $__LIST__ = $goods_detail['models'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$models): $mod = ($i % 2 );++$i;?> 

                                    <div class="swiper-slide">

                                        <div class="img_100">

                                            <img src="<?php echo htmlentities($models['thumb'],ENT_QUOTES); ?>" class="models_select_swpiper" style="cursor: pointer;" data-id="<?php echo htmlentities($models['id'],ENT_QUOTES); ?>" />

                                        </div>

                                    </div>

                                <?php endforeach; endif; else: echo "" ;endif; ?>

                            <?php endif; ?> -->

                        </div>

                    </div>

                    <div class="layui-icon layui-icon-down next"></div>

                </div>

            </div>

            <input type="hidden" name="model_id"  class="model_ids" value="<?php echo !empty($models_first) ? htmlentities($models_first->id,ENT_QUOTES) :  0; ?> ">

           <div class="product-infot flex-1">

               <h1 class="ft30 pt30 pb30"><?php echo htmlentities($goods_detail['title'],ENT_QUOTES); ?></h1>

                <p class="mb30 models_name"></p>

                <dl id="specs">

                        <!-- <?php if(isset($models_first->attributes_info)): if(is_array($models_first->attributes_info) || $models_first->attributes_info instanceof \think\Collection || $models_first->attributes_info instanceof \think\Paginator): $i = 0; $__LIST__ = $models_first->attributes_info;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$models): $mod = ($i % 2 );++$i;?> 

                            <dd><?php echo htmlentities($models['name'],ENT_QUOTES); ?>：<?php echo htmlentities($models['value'],ENT_QUOTES); ?></dd>

                            <?php endforeach; endif; else: echo "" ;endif; ?>

                        <?php endif; ?> -->

                </dl>

                <div class="more">

                    <button class="layui-btn">  <span>点击查看全部参数</span>

                <i class="layui-icon layui-icon-down"></i></button>

                   

                 </div>

                 </div>

                

            </div>

        



        </div>

    </section>

    <h2>产品详情</h2>

    <section>

        <div class="layui-main ">

            <div class="s_content">

                <?php echo nl2br($goods_detail['content']); ?>

            </div>

        </div>

    </section>

</main>

<div class="order-confrim product-order-confrim">

    <div class="layui-main d-flex al-c jc-s">

        <div>购物车已选择<span data-count="all"> 1</span> 件产品</div>

        <div class="d-flex flex-column-xs gap40 gap20-xs al-c">

            <div class="num-box" data-type="number">

                <i  class="layui-icon cart_min layui-icon-subtraction"></i>

                <input data-name="number" class="layui-input" value="1">

                <i  class="layui-icon  cart_add layui-icon-addition"></i>

            </div>

            <div class="d-flex al-c br20">



                <button class="layui-btn add_cart">加入购物车</button>

                <button class="layui-btn red-btn sure_order">立即下单</button>

            </div>

        </div>

    </div>

</div>

<script src="/public/home/js/index.js"></script>

<script src="/public/home/js/swiper-bundle.min.js"></script>

<script src="/public/static/index.js"></script>

<script>

    

    $(document).on('click','.more',function () {

        $(this).remove()

        $('.product-infot ').css({

            height:'auto',

            

        })

    })

    $(document).on('click','.more-btn',function () {

        $('.product-right-nav').toggleClass('open')

    })



    $(document).on('click','.add_cart',function () {

        let field = {

            goods_id : "<?php echo htmlentities($goods_detail['id'],ENT_QUOTES); ?>" ,

            model_id : $('.model_ids').val(),

            cart_num : $('span[data-count="all"]').text()

        }

        ajaxRequest('/goods-cart-add', field, 'POST', this, function (response) {

            layer.msg('添加成功', {icon: 1, time: 2000}, function() {

         

             });

        });

    })



    $(document).on('click','.sure_order',function () {

        let field = {

            goods_id : "<?php echo htmlentities($goods_detail['id'],ENT_QUOTES); ?>" ,

            model_id : $('.model_ids').val(),

            cart_num : $('span[data-count="all"]').text()

        }

        ajaxRequest('/goods-sure-order', field, 'POST', this, function (response) {

            layer.msg('下单成功', {icon: 1, time: 2000}, function() {

         

             });

        });

    })



    

    

    

    $(document).ready(function() {

         // 获取购物车数量元素

            var $countDisplay = $('span[data-count="all"]');

            

            // 获取数量输入框和按钮

            var $numInput = $('input[data-name="number"]');

            var $decrementBtn = $('.layui-icon-subtraction');

            var $incrementBtn = $('.layui-icon-addition');

            

            // 点击减号按钮

            $decrementBtn.on('click', function() {

                var currentValue = parseInt($numInput.val());

                if (currentValue > 1) { // 最小为1

                    currentValue--;

                    $numInput.val(currentValue); // 更新输入框值

                    updateCartCount(currentValue); // 更新购物车已选择的数量

                }

            });

            

            // 点击加号按钮

            $incrementBtn.on('click', function() {

                var currentValue = parseInt($numInput.val());

                currentValue++;

                $numInput.val(currentValue); // 更新输入框值

                updateCartCount(currentValue); // 更新购物车已选择的数量

            });



            // 更新购物车已选择的数量

            function updateCartCount(count) {

                $countDisplay.text(count); // 更新显示的数量

            }



        var swiper = new Swiper(".mySwiperThum", {

            loop: true,

            spaceBetween: 10,

            slidesPerView: 4,

            freeMode: true,

            watchSlidesProgress: true,

            direction: 'vertical',

        });

        var swiper2 = new Swiper(".mySwiper2", {

            loop: true,

            spaceBetween: 10,

            navigation: {

                nextEl: ".next",

                prevEl: ".prev",

            },

            thumbs: {

                swiper: swiper,

            },

        });

        function fetchModelDetails(modelId,swiper = false) {

            $.ajax({

                url: '/goods-spec-detail-' + modelId, // 替换为实际的处理 URL

                method: 'GET',

                success: function(response) {

                    if (response.code === 1) {

                        updateSpecInfo(response.data); // 更新规格信息
                        if(response.data.thumb){
                            $('#logo').addClass('animated-logo');

                            // 设置新图片链接
                            $('#logo').attr('src', response.data.thumb);

                            // 动画结束后移除动画类
                            setTimeout(function () {
                            $('#logo').removeClass('animated-logo');
                            }, 500); // 动画持续时间 0.5s
                        }

                        if(!swiper){

                            updateSwiperSlide(modelId); // 更新对应的swiper幻灯片

                        }

                       

                    } else {

                        // 失败返回时显示错误

                        $('#specs').html('<dd>加载属性失败，请重试。</dd>');

                    }

                },

                error: function() {

                    // 请求失败时显示错误

                    $('#specs').html('<dd>请求失败，请重试。</dd>');

                }

            });

        }



                // 更新swiper的slide

        function updateSwiperSlide(modelId) {

            var targetSlide = $('#' + modelId); // 获取对应型号的 swiper-slide

            if (targetSlide.length > 0) {

                var slideIndex = targetSlide.index(); // 获取该 slide 的索引

                swiper2.slideTo(slideIndex); // 跳转到该索引的幻灯片

            }

        }



        // 更新规格信息

        function updateSpecInfo(data) {

            $('#specs').empty(); // 清空现有内容

            $('.models_name').text(data.name); // 更新型号名称



            if (data.attributes_info.length > 0) {

                data.attributes_info.forEach(function(attribute) {

                    var dd = '<dd>' + attribute.name + '：' + attribute.value + '</dd>';

                    $('#specs').append(dd);

                });

            }

        }

        // 为 .models_select 添加点击事件监听器

        $('.models_select').on('click', function() {

            var modelId = $(this).data('id'); // 获取点击的模型 id

            $('.model_ids').val(modelId)

            $(this).siblings('.models_select').removeClass('spec_active');

            $(this).addClass('spec_active')
            fetchModelDetails(modelId)
            // updateSwiperSlide(modelId)

        });



        // $('.models_select_swpiper').on('click',function(){

        //     fetchModelDetails(modelId)

        // })



        swiper2.on('slideChange', function() {
            var activeIndex = this.activeIndex;

            // 获取当前幻灯片的 DOM 元素
            var activeSlide = this.slides[activeIndex];

            // 获取图片链接（假设存储在 data-src 属性中）
            var imageSrc = $(activeSlide).find('img').attr('src');
            if(imageSrc){
                $('#logo').addClass('animated-logo');

                // 设置新图片链接
                $('#logo').attr('src', imageSrc);

                // 动画结束后移除动画类
                setTimeout(function () {
                $('#logo').removeClass('animated-logo');
                }, 500); // 动画持续时间 0.5s
            }

            // var activeSlide = swiper.slides[swiper2.activeIndex]; // 获取当前显示的 slide

            // var modelId = $(activeSlide).find('img').data('id');

            // fetchModelDetails(modelId,true)

        })

    });



</script>



<!-- 中间区域结束 -->


<footer class="pt36 pb36 ">

      <div class="layui-main d-grid gap20 al-c white_c" >
         <a href="/" class="img_box  mb10">
            <img src="<?php echo htmlentities($config['footer_pic'],ENT_QUOTES); ?>">
         </a>
       
            <ul class="d-flex  jc-c al-c gap84 gap20-xs flex-wrap">
        
               <?php if(is_array($nav) || $nav instanceof \think\Collection || $nav instanceof \think\Paginator): if( count($nav)==0 ) : echo "" ;else: foreach($nav as $key=>$navValue): ?>

               <li lay-unselect>
                  <a href="<?php echo htmlentities($navValue['url'],ENT_QUOTES); ?>"> <?php echo htmlentities($navValue['title'],ENT_QUOTES); ?></a>
               </li>
               <?php endforeach; endif; else: echo "" ;endif; ?>

            </ul>

         <ul class="d-flex al-c jc-se flex-wrap">
            <li >
               <div class="item">
              <img class="d-fs" src="/public/home/images/tel.png">    联系电话：<span> <?php echo htmlentities($config['tel'],ENT_QUOTES); ?></span>
               </div>
            </li>
            <li >
               <div class="item">
                 <img class="d-fs" src="/public/home/images/email.png">  <span class="white-nowrap"> 邮箱：</span> <span><?php echo htmlentities($config['email'],ENT_QUOTES); ?></span>
               </div>
            </li>
            <li >
               <div class="item">
                 <img class="d-fs" src="/public/home/images/address.png"> <span class="white-nowrap"> 地址：</span> <span><?php echo htmlentities($config['address'],ENT_QUOTES); ?></span>
               </div>
            </li>

         </ul>
         <p class="ft14 text-align-center"><?php echo htmlentities($config['copy'],ENT_QUOTES); ?></p>
      </div>
</footer>
</body>

</html>